<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <style>
        .hed{
          height:200px;
          background: #6FDA6F;
          padding: 30px 15px;
          position: relative;
        }
        img{
          max-width:100%;
        }
        .hed1{
          width: 100%;
          height:100px;
        }
        .hed11{
          float:left;
          width:70%;
          color:#fff;
        }
        .hed12{
          float:right;
          width:30%;
        }
        .hed111{
          font-size: 30px;
          width: 100%;
          overflow: hidden;
          height:40px;
          line-height: 40px;
        }
        .hed12 img{
          width:80px;
          height:80px;
          border-radius: 50%;
          border:2px solid #fff;
        }
        .hed2{
          position: absolute;
          width:calc(100% - 30px);
          left:15px;
          top:130px;
          background: #40D164;
          z-index: 2;
          border-radius: 15px;
        }
        .hed21{
          float:left;
          width:100px;
          height:100px;
        }
        .hed21 img{
          position: relative;
          top:-25px;
        }
        .new-dog{
  				position: absolute;
  				top:150px;
  				border-radius: 15px;
  				height:80px;
  				width:calc(100% - 40px);
  				left:20px;
  				background-color: #59D875;
  				z-index: 3;
  			}
  			.new-dog img{
  				width: 94px;
  				position: relative;
  				display:inline-block;
  				top:-40px;
  				left:5px;
  			}
  			.new-dog2{
  				display: inline-block;
          vertical-align: top;
          padding-top: 15px;
  			}
  			.new-dog21{
  				font-weight: bold;
  				font-size: 18px;
  				line-height: 30px;
  				color:#fff;
  				font-style: italic;
  			}
  			.new-dog3::after{
  				content: " ";
  				display: inline-block;
  				height: 7px;
  				width: 7px;
  				border-width: 3px 3px 0 0;
  				border-color: #fff;
  				border-style: solid;
  				-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  				transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  				position: relative;
  				top: -2px;
  				position: absolute;
  				top: 50%;
  				margin-top: -6px;
  				right: 15px;
  				border-radius: 2px;
  				border-width: 2px 2px 0 0;
  			}
  			.new-dog22{
  				height: 30px;
  				color:#fff;
  				line-height: 20px;
          font-size: 12px;
  			}
  			.new-dog221{
  				display: inline-block;
  				height:12px;
  				width:100px;
  				background-color: #fff;
  				border-radius: 5px;
  				padding: 1px;
  				position: relative;
  				top:4px;
  			}
  			.new-dog222{
  				border-radius: 5px;
  				display: inline-block;
  				height:10px;
  				background-color: #4DD46E;
  				vertical-align: top;
  			}
        .bod{
          background: #F6F7F6;
          padding: 30px 0;
        }
        .itm{
          margin: 10px 15px;
          background: #fff;
          border-radius: 15px;
        }
        .item{
          height:60px;
          line-height: 60px;
          padding: 0 15px;
          font-size: 16px;
          padding-right:30px;
          position: relative;
        }
        .item img{
          width:25px;
          height:25px;
          vertical-align: middle;
          position: relative;
          top:0;
          margin-right: 10px;
        }
        .item span{
          color:#999;
        }
        .item::after{
  				content: " ";
  				display: inline-block;
  				height: 7px;
  				width: 7px;
  				border-width: 3px 3px 0 0;
  				border-color: #666;
  				border-style: solid;
  				-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  				transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  				position: relative;
  				top: 0px;
  				position: absolute;
  				top: 55%;
  				margin-top: -6px;
  				right: 15px;
  				border-radius: 2px;
  				border-width: 2px 2px 0 0;
  			}
    </style>
</head>
<body>
  <div class="my">
    <div class="hed">
      <div class="hed1">
        <div class="hed11">
          <div class="hed111">无棱的山无棱的山无棱的山</div>
          <div class="hed112">ID：2165451</div>
        </div>
        <div class="hed12"><img src="../image/app/dog/ic_dog_level2.png" alt=""></div>
      </div>
      <div class="new-dog">
				<img src="../image/app/ic_me_dog.png" alt="">
				<div class="new-dog2">
					<div class="new-dog21">个人努力必得分红犬</div>
					<div class="new-dog22">已完成  94.28%
						<div class="new-dog221">
							<span class="new-dog222" style="width:94.28%;"></span>
						</div>
					</div>
				</div>
				<div class="new-dog3">
				</div>
			</div>
    </div>

    <div class="bod">
      <div class="itm">
        <div class="item">
          <img src="../image/app/mess.png" alt="">消息
        </div>
      </div>
      <div class="itm">
        <div class="item">
          <img src="../image/app/money.png" alt="">我的钱包
          <span class="fr">￥999.9</span>
        </div>
        <div class="item">
          <img src="../image/app/name.png" alt="">渠道合伙人
        </div>
        <div class="item">
          <img src="../image/app/invit.png" alt="">我的邀请码
          <span class="fr">1725645</span>
        </div>
        <div class="item">
          <img src="../image/app/away.png" alt="">每日答题奖励
        </div>
      </div>
      <div class="itm">
        <div class="item">
          <img src="../image/app/name.png" alt="">实名认证
        </div>
        <div class="item">
          <img src="../image/app/help.png" alt="">帮助中心
        </div>
        <div class="item">
          <img src="../image/app/set.png" alt="">设置
        </div>
      </div>
    </div>
  </div>
</body>
</html>
